<template>
  <a-form
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
      layout="horizontal"
      :disabled="componentDisabled"
      style="max-width: 600px"
  >
    <a-form-item label="单点名字">
      <a-input v-model:value="users.name"/>
    </a-form-item>

    <a-form-item label="单点简述">
      <a-input v-model:value="users.jiansu"/>
    </a-form-item>
    <a-form-item label="单点价格">
      <a-input-number v-model:value="users.jiage"/>
    </a-form-item>

    <a-form-item label="单点数量">
      <a-input-number v-model:value="users.baohan"/>
    </a-form-item>


    <a-form-item label="图片上传">
      <a-upload action="/upload.do"
                :max-count="1"
                :custom-request="handleCustomRequest"
                list-type="picture-card"
                v-model:file-list="fileList"
                :on-change="handleChange"

      >

        <div>
          <PlusOutlined/>
          <div style="margin-top: 8px">图片上传</div>
        </div>
      </a-upload>
    </a-form-item>
    <a-form-item label="确认">
      <a-button type="primary" @click="goqueren">确认</a-button>
    </a-form-item>
  </a-form>
</template>
<script setup lang="ts">
import {ref, reactive, onMounted, watch} from 'vue';
import myaxios from "../../Axios/myaxios";
import {Modal, UploadProps} from "ant-design-vue";
import {useRouter} from "vue-router";

const labelCol = {
  style: {
    width: '150px',
  },
};
const wrapperCol = {
  span: 14,
};

const users = reactive({
  name: "",
  jiansu: "",
  jiage: "",
  baohan: "",
  tupian: "",

});

const fileList = ref<UploadProps['fileList']>([]);
// Handle the custom request for uploading the file manually
const handleCustomRequest = async (options: any) => {
  if (fileList.value.length > 0) {
    const file = fileList.value[0];
    const formData = new FormData();
    formData.append('mfile', file.originFileObj); // 上传文件

    try {
      const response = await myaxios.post('/photo/upload', formData, {
        headers: {
          'Content-Type': 'multipart/form-data',
        },
      });

      // 上传成功后更新文件状态和 URL
      fileList.value = [
        {
          ...file,
          status: 'done', // 标记为上传成功
        },
      ];
      users.tupian = response;
      console.log('File uploaded successfully', users.tupian);
    } catch (error) {
      fileList.value = [
        {
          ...file,
          status: 'error', // 上传失败，设置为 error 状态
        },
      ];
      console.error('Error uploading file', error);
    }
  } else {
    console.error('No file selected');
  }
}
const router = useRouter()
onMounted(() => {
})
watch(users, () => {
  // console.log(users.name);
  // console.log(users.jiansu);
  // console.log(users.jiage);
  // console.log(users.baohan);
});
const goqueren = async () => {
  
  const response = await myaxios.post('/foodSingles/addFoodSingles',{
    foodBriefly:users.jiansu,
    foodNum: users.baohan,
    foodImg: users.tupian,
    foodName: users.name,
    foodPrice: users.jiage
  })
  if (response.code===20000){
    let success = Modal.success({
      title: '提示',
      content: '新增单点成功',
    });
    // if(success){
    //   router.push('/alltaocan')
    // }

  }
  else {
    console.log(222)
  }
}
</script>
